{% extends "base.html" %}

{% block title %}跟进记录详情{% endblock %}

{% block styles %}
<style>
    /* 自定义样式，替代Bootstrap */
    .detail-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .header-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .header-title {
        margin: 0;
        font-size: 24px;
        color: #333;
    }
    
    .btn {
        display: inline-block;
        padding: 8px 16px;
        margin: 0 5px;
        border: none;
        border-radius: 4px;
        text-decoration: none;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s;
    }
    
    .btn-primary {
        background-color: #007bff;
        color: white;
    }
    
    .btn-primary:hover {
        background-color: #0056b3;
    }
    
    .btn-secondary {
        background-color: #6c757d;
        color: white;
    }
    
    .btn-secondary:hover {
        background-color: #545b62;
    }
    
    .btn-danger {
        background-color: #dc3545;
        color: white;
    }
    
    .btn-danger:hover {
        background-color: #c82333;
    }
    
    .btn-sm {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .btn-outline-primary {
        background-color: transparent;
        color: #007bff;
        border: 1px solid #007bff;
    }
    
    .btn-outline-primary:hover {
        background-color: #007bff;
        color: white;
    }
    
    .content-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }
    
    .content-col {
        flex: 1;
        padding: 0 10px;
        margin-bottom: 20px;
    }
    
    .content-col-8 {
        flex: 2;
    }
    
    .content-col-4 {
        flex: 1;
    }
    
    .content-col-6 {
        flex: 1;
    }
    
    .card {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .card-header {
        padding: 15px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #ddd;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .card-header h5 {
        margin: 0;
        font-size: 18px;
        color: #333;
    }
    
    .card-body {
        padding: 15px;
    }
    
    .status-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
    }
    
    .badge-success {
        background-color: #28a745;
        color: white;
    }
    
    .badge-warning {
        background-color: #ffc107;
        color: #212529;
    }
    
    .badge-primary {
        background-color: #007bff;
        color: white;
    }
    
    .badge-info {
        background-color: #17a2b8;
        color: white;
    }
    
    .badge-secondary {
        background-color: #6c757d;
        color: white;
    }
    
    .info-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    
    .info-col {
        flex: 1;
        min-width: 200px;
        padding: 5px;
    }
    
    .info-col strong {
        color: #495057;
    }
    
    .content-section {
        margin-bottom: 20px;
    }
    
    .content-section h4 {
        margin-bottom: 10px;
        color: #495057;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
    }
    
    .content-text {
        line-height: 1.6;
        color: #333;
    }
    
    .table-responsive {
        overflow-x: auto;
    }
    
    .custom-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }
    
    .custom-table th,
    .custom-table td {
        padding: 8px 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    
    .custom-table th {
        background-color: #f8f9fa;
        font-weight: 600;
    }
    
    .custom-table tr:hover {
        background-color: #f5f5f5;
    }
    
    .text-muted {
        color: #6c757d;
        font-style: italic;
    }
    
    .mt-3 {
        margin-top: 15px;
    }
    
    .mb-3 {
        margin-bottom: 15px;
    }
    
    .mb-4 {
        margin-bottom: 20px;
    }
    
    .mb-0 {
        margin-bottom: 0;
    }
    
    .fas {
        margin-right: 5px;
    }
    
    @media (max-width: 768px) {
        .content-row {
            flex-direction: column;
        }
        
        .content-col {
            width: 100%;
        }
        
        .header-section {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .header-section .btn-group {
            margin-top: 10px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="detail-container">
    <!-- 页面标题和操作按钮 -->
    <div class="header-section">
        <h1 class="header-title">跟进记录详情</h1>
        <div class="btn-group">
            <a href="{{ url_for('followup.edit_followup', followup_id=followup.id) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i> 编辑
            </a>
            <a href="{{ url_for('followup.delete_followup', followup_id=followup.id) }}" 
               class="btn btn-danger" 
               onclick="return confirm('确定要删除这条跟进记录吗？')">
                <i class="fas fa-trash"></i> 删除
            </a>
             <a href="{{ url_for('followup.list_followups') }}" class="btn btn-secondary">
                 <i class="fas fa-arrow-left"></i> 返回列表
             </a>
        </div>
    </div>

    <div class="content-row">
        <div class="content-col content-col-8">
            <!-- 跟进基本信息 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">基本信息</h5>
                </div>
                <div class="card-body">
                    <div class="info-row">
                        <div class="info-col">
                            <strong>跟进日期：</strong> {{ followup.followup_time.strftime('%Y-%m-%d') }}
                        </div>
                        <div class="info-col">
                            <strong>跟进方式：</strong> 
                            {% if followup.method == 'phone' %}
                                <span class="status-badge badge-primary">电话</span>
                            {% elif followup.method == 'email' %}
                                <span class="status-badge badge-info">邮件</span>
                            {% elif followup.method == 'visit' %}
                                <span class="status-badge badge-success">拜访</span>
                            {% elif followup.method == 'wechat' %}
                                <span class="status-badge badge-warning">微信</span>
                            {% else %}
                                <span class="status-badge badge-secondary">{{ followup.method }}</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-col">
                            <strong>跟进人员：</strong> {{ followup.user.username if followup.user else '未知' }}
                        </div>
                        <div class="info-col">
                            <strong>跟进状态：</strong> 
                            {% if followup.status == 'completed' %}
                                <span class="status-badge badge-success">已完成</span>
                            {% elif followup.status == 'in_progress' %}
                                <span class="status-badge badge-primary">进行中</span>
                            {% elif followup.status == 'pending' %}
                                <span class="status-badge badge-warning">待处理</span>
                            {% else %}
                                <span class="status-badge badge-secondary">{{ followup.status }}</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 跟进内容 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">跟进内容</h5>
                </div>
                <div class="card-body">
                    <div class="content-section">
                        <h4>客户反馈</h4>
                        <div class="content-text">{{ followup.customer_feedback | nl2br }}</div>
                    </div>
                    <div class="content-section">
                        <h4>跟进人员记录</h4>
                        <div class="content-text">{{ followup.content | nl2br }}</div>
                    </div>
                    <div class="content-section">
                        <h4>下一步计划</h4>
                        <div class="content-text">{{ followup.next_step | nl2br }}</div>
                    </div>
                </div>
            </div>

            <!-- 解决方案配合信息 -->
            {% if followup.solution_support %}
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">解决方案配合信息</h5>
                </div>
                <div class="card-body">
                    <div class="info-row">
                        <div class="info-col">
                            <strong>配合人员：</strong> 
                            {{ followup.solution_support_user.username if followup.solution_support_user else '未指定' }}
                        </div>
                        <div class="info-col">
                            <strong>配合状态：</strong> 
                            {% if followup.solution_confirmed %}
                                <span class="status-badge badge-success">已确认</span>
                            {% else %}
                                <span class="status-badge badge-warning">待确认</span>
                            {% endif %}
                        </div>
                    </div>
                    {% if followup.solution_support_time %}
                    <div class="info-row">
                        <div class="info-col">
                            <strong>配合时间：</strong> 
                            {{ followup.solution_support_time.strftime('%Y-%m-%d %H:%M') }}
                        </div>
                    </div>
                    {% endif %}
                    
                    <!-- 确认配合按钮 -->
                    {% if not followup.solution_confirmed and (current_user.id == followup.solution_support_user_id or current_user.role in ['admin', 'manager']) %}
                    <div class="mt-3">
                        <a href="{{ url_for('followup.confirm_solution_support', followup_id=followup.id) }}" 
                           class="btn btn-primary">
                            <i class="fas fa-check"></i> 确认配合
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>

        <div class="content-col content-col-4">
            <!-- 客户信息 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">客户信息</h5>
                </div>
                <div class="card-body">
                    <p><strong>客户名称：</strong> {{ followup.customer.name if followup.customer else '未知客户' }}</p>
                    <p><strong>客户编号：</strong> {{ followup.customer.customer_number if followup.customer else '' }}</p>
                    <p><strong>客户分类：</strong> {{ followup.customer.category if followup.customer else '' }}</p>
                    <p><strong>客户归属地：</strong> {{ followup.customer.location if followup.customer else '' }}</p>
                    <p><strong>客户来源：</strong> {{ followup.customer.source if followup.customer else '' }}</p>
                    <p><strong>负责人：</strong> {{ followup.customer.manager.username if followup.customer and followup.customer.manager else '' }}</p>
                    <div class="mt-3">
                        <a href="{{ url_for('customer.view_customer', customer_id=followup.customer.id) }}" 
                           class="btn btn-sm btn-outline-primary" target="_blank">
                            <i class="fas fa-eye"></i> 查看详情
                        </a>
                    </div>
                </div>
            </div>

            <!-- 联系人信息 -->
            {% if followup.contact %}
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">联系人信息</h5>
                </div>
                <div class="card-body">
                    <p><strong>姓名：</strong> {{ followup.contact.name }}</p>
                    <p><strong>职位：</strong> {{ followup.contact.title or '未设置' }}</p>
                    {% if current_user.role == 'admin' %}
                    <p><strong>电话：</strong> {{ followup.contact.phone or '未设置' }}</p>
                    {% else %}
                    <p><strong>电话：</strong> *** (仅管理员可见)</p>
                    {% endif %}
                    <p><strong>邮箱：</strong> {{ followup.contact.email or '未设置' }}</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- 项目关联信息 -->
    <div class="content-row">
        <div class="content-col content-col-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">客户历史项目</h5>
                </div>
                <div class="card-body">
                    {% if projects %}
                    <div class="table-responsive">
                        <table class="custom-table">
                            <thead>
                                <tr>
                                    <th>项目名称</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for project in projects %}
                                <tr>
                                    <td>{{ project.name }}</td>
                                    <td>
                                        {% if project.status == 'completed' %}
                                            <span class="status-badge badge-success">已完成</span>
                                        {% elif project.status == 'in_progress' %}
                                            <span class="status-badge badge-primary">进行中</span>
                                        {% elif project.status == 'planning' %}
                                            <span class="status-badge badge-info">规划中</span>
                                        {% else %}
                                            <span class="status-badge badge-secondary">{{ project.status }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a href="{{ url_for('project.view_project', project_id=project.id) }}" 
                                           class="btn btn-sm btn-outline-primary" target="_blank">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted">暂无历史项目</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="content-col content-col-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">个人在跟项目</h5>
                </div>
                <div class="card-body">
                    {% if user_projects %}
                    <div class="table-responsive">
                        <table class="custom-table">
                            <thead>
                                <tr>
                                    <th>项目名称</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for project in user_projects %}
                                <tr>
                                    <td>{{ project.name }}</td>
                                    <td>
                                        {% if project.status == 'completed' %}
                                            <span class="status-badge badge-success">已完成</span>
                                        {% elif project.status == 'in_progress' %}
                                            <span class="status-badge badge-primary">进行中</span>
                                        {% elif project.status == 'planning' %}
                                            <span class="status-badge badge-info">规划中</span>
                                        {% else %}
                                            <span class="status-badge badge-secondary">{{ project.status }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a href="{{ url_for('project.view_project', project_id=project.id) }}" 
                                           class="btn btn-sm btn-outline-primary" target="_blank">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted">暂无在跟项目</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 这里可以添加页面特定的JavaScript代码
});
</script>
{% endblock %}